<template>
  <page-main class="page-doctor-index">
    <div class="p-a-15">
      <div class="info fly-card">
        <div class="item">
          <div class="thumb"><van-image :src="info.staffPicture" round width="40px" height="40px" /></div>
          <div class="content">
            <div class="title">{{info.staffName}}</div>
            <div class="desc">{{$util.setName(info.professionalTitle, init_data.professional_list)}}</div>
          </div> 
        </div>
        <div class="ft">
          <div class="introduce ellipsis-2" @click="showMore">
            医生简介：{{info.staffIntro}}
          </div>
          <div class="c-blue ft-12 align-right"  @click="showMore" v-if="isMore">查看更多</div>
          <div class="hide-introduce" ref="hideIntroduce">医生简介：{{ info.staffIntro }}</div>
          <div class="tag">
            <van-tag v-for="(item,index) in info.tagList" :key="index" round type="primary" class="tag-blue-light">{{item}}</van-tag>
          </div>
        </div>
      </div>
      <div class="hd">
        <h3>医生全部排班</h3>
      </div>
      <van-empty description="近7天暂无排班信息" v-if="list.length == 0" />
      <div class="list" v-else>
        <van-cell-group>
            <van-cell v-for="(item,index) in list" :key="index" :title="item.schedulingYear + '（'+item.schedulingYearWeek+'）'" @click="handleSelect(item)">
            <div class="c-red" slot="label">￥{{fee.min}}<span class="ft-12">起</span></div>
            <van-tag type="default" v-if="item.makeNumber == 0">约满</van-tag>
            <van-tag type="primary" v-else round size="medium">剩余{{item.makeNumber}}</van-tag>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <select-time ref="selectTime" @confirm="submitForm" />
  </page-main>
</template>

<script>
import selectTime from './components/selectTime';
export default {
  components:{
    selectTime,
  },
  data(){
    return{
      pageParams:{},
      info:{
        name:'',
        desc: '',
        imgUrl: '#',
        staffIntro: '',
        tagList:[]
      },
      fee: {
        min: 0,
        max: 0
      },
      isMore: false,
      list:[],
      form:{
        cardId: null,
        custName: null,
        makeId: null,
        makeStaffId: null,
        makeStaffName: null,
        makeStatus: 0,
        makeType: 1, //预约类型/渠道，读取字典,0：门诊挂号，1：公众号预约,2自助机
        officeId: null,
        officeName: null,
        payStatus: 0,
        phone: null,
        registrationFee: 0,
        registrationName: null,
        remark: null,
        schedulingYear: null,
        makeTime: null,
        // makeTime: {
        //   hour: null,
        //   minute: null,
        //   namo: '00',
        //   second: '00'
        // }
      },
      init_data:{
        professional_list:[]
      },
    }
  },
  async created(){
    this.pageParams = this.$route.query;
    await this.getInitData();
    this.getSchedul();
  },
  methods:{
    async getInitData(){
      this.init_data.professional_list = await this.$util.getDictList('professional_title');
      this.init_data.staffLabel_list = await this.$util.getDictList('staff_label');
      this.$util.resetForm(this.form, this.pageParams);
      this.getInfo();
    },
    getInfo(){
      this.$http('get', '/admin/custApi/'+ this.pageParams.patientId, {}, (data,msg) => {
        this.form.cardId = data.cardId;
        this.form.custName = data.custName;
        this.form.phone = data.phone;
      });
    },
    getRegistrationFee(id){
      this.$http('get', '/admin/registrationApi/GetRegistrationAndFee', {professionalTitleId: id}, (data,msg) => {
        this.init_data.regist_list = this.$util.transformArray(data, 'registId', 'registrationName');
        let arr = this.init_data.regist_list.map(item => item.fee);
        this.fee.max = Math.max(...arr);
        this.fee.min = Math.min(...arr);
        // console.log(max,min);
        // this.fee = min + '-' + max;
      })
    },
    getSchedul(){
      this.$http('get', '/admin/officeApi/staffOrScheduling/'+this.$route.query.makeStaffId, {}, (data,msg) => {
        this.info = data;       
        this.info.staffPicture = this.$util.baseUrl + this.info.staffPicture;
        this.$nextTick(() => {
          const divHeight = this.$refs.hideIntroduce.clientHeight;
          if(divHeight > 60){
            this.isMore = true;
          }else{
            this.isMore = false;
          }
        });
        this.getRegistrationFee(data.professionalTitle);
        this.getList(data.schedulingList);
        if(data.staffLabel){
          let arr = data.staffLabel.split(',');
          this.info.tagList = [];
          arr.forEach(item => {
            let name = this.$util.setName(item, this.init_data.staffLabel_list);
            this.info.tagList.push(name);
          });
        }
        if(this.pageParams.schedulingYear){
          let obj = this.list.find(item => item.schedulingYear == this.pageParams.schedulingYear);
          this.handleSelect(obj);
        }
      })
    },
    getList(data){
      let ids = [];
        data.forEach(item => {
          if(ids.indexOf(item.schedulingYear) == -1){
            ids.push(item.schedulingYear)
          }
        });
        let arr = [];
        ids.forEach(item => {
          let list = data.filter(sub => sub.schedulingYear == item);
          let obj = {...list[0]};
          obj.makeNumber = 0;
          obj.times = [];
          list.forEach(item => {
            obj.makeNumber += Number(item.makeNumber);
            obj.times.push({startTime: item.startTime, endTime: item.endTime, schedulingType: item.schedulingType, schedulingId: item.schedulingId});
          });
          arr.push(obj);
        });
        arr.sort((a,b) => new Date(a.schedulingYear) - new Date(b.schedulingYear));
        this.list = arr;
    },  
    handleSelect(item){
      if(item.makeNumber == 0){
        this.$toast('该日期已约满！');
        return;
      }
      this.$refs.selectTime.init(item)
    },  
    submitForm(item){
      let params = {...this.$route.query,...item};
      this.$util.gotoPage('/appointment/index', params);
      return;
      this.form.schedulingYear = item.schedulingYear;
      // let arr = item.name.substring(0,5).split(':');
      // this.form.makeTime.hour = arr[0];
      // this.form.makeTime.minute = arr[1];
      this.form.makeTime = item.name.substring(0,5) + ':00';
      this.btn_loading = true;
      this.$http('post', '/admin/registrationApi', this.form, (data,msg) => {
        this.$toast.success('预约成功');
        this.$util.gotoPage('/appointment/success');
        this.btn_loading = false;
      }, msg => {
        this.btn_loading = false;
      })
    },
    showMore(){
      if(this.isMore){
        this.$dialog.alert({
          title: '医生简介',
          message: this.info.staffIntro
        }).then(() => {

        })
      }
    }
  }
}
</script>

<style>

</style>